<template>
  <div class="maintenance-management-page">
    <h2>维修管理</h2>
    
    <!-- 搜索和筛选区域 -->
    <div class="filter-container">
      <div class="search-box">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索维修记录..." 
          @keyup.enter="handleSearch"
        />
        <button class="btn btn-search" @click="handleSearch">
          搜索
        </button>
      </div>
      
      <div class="filter-box">
        <select v-model="roomIdFilter" @change="handleFilterChange">
          <option value="">所有会议室</option>
          <option v-for="room in roomList" :key="room.roomId" :value="room.roomId">
            {{ room.roomname }}
          </option>
        </select>
        
        <select v-model="statusFilter" @change="handleFilterChange">
          <option value="">所有状态</option>
          <option value="1">待处理</option>
          <option value="2">处理中</option>
          <option value="3">已完成</option>
        </select>
        
        <button class="btn btn-reset" @click="resetFilters">
          重置
        </button>
      </div>
      
      <div class="action-box">
        <button class="btn btn-primary" @click="openAddModal">
          新增维修记录
        </button>
      </div>
    </div>
    
    <!-- 加载和错误状态 -->
    <div v-if="loading" class="loading">
      <p>加载中...</p>
    </div>
    
    <div v-else-if="error" class="error">
      <p>{{ error }}</p>
      <button @click="fetchRecords" class="btn">重试</button>
    </div>
    
    <!-- 维修记录表格 -->
    <div v-else class="records-container">
      <table v-if="records.length > 0" class="records-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>会议室</th>
            <th>问题描述</th>
            <th>报修时间</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态</th>
            <th>处理人</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in records" :key="record.maintenanceId">
            <td>{{ record.maintenanceId }}</td>
            <td>{{ record.roomname || `会议室${record.roomId}` }}</td>
            <td class="description-cell">{{ record.problemDesc }}</td>
            <td>{{ formatDate(record.createTime) }}</td>
            <td>{{ record.status >= 2 ? formatDate(record.startTime) : '-' }}</td>
            <td>{{Number(record.status)=== 3 ? formatDate(record.endTime) : '-' }}</td>
            <td>
              <span :class="getStatusClass(record.status)">
                {{ getStatusText(record.status) }}
              </span>
            </td>
            <td>{{ record.handlerName || '未分配' }}</td>
            <td class="action-cell">
              <button 
                class="btn btn-small btn-edit" 
                @click="openEditModal(record)"
              >
                编辑
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div v-else class="no-data">
        <p>暂无维修记录</p>
      </div>
      
      <!-- 分页 -->
      <div v-if="records.length > 0" class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRecords"
          @size-change="handleSizeChange"
          @current-change="changePage"
          background
        />
      </div>
    </div>
    
    <!-- 新增维修记录弹窗 -->
    <div v-if="showAddModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal-container">
        <h3>新增维修记录</h3>
        
        <div class="form-group">
          <label>会议室:</label>
          <select v-model="addForm.roomId" required>
            <option value="">请选择会议室</option>
            <option v-for="room in allRoomsList" :key="room.roomId" :value="room.roomId">
              {{ room.roomname }}
            </option>
          </select>
        </div>
        
        <div class="form-group">
          <label>问题描述:</label>
          <textarea v-model="addForm.problemDesc" rows="4" required></textarea>
        </div>
        
        <div class="form-group">
          <label>处理人:</label>
          <select v-model="addForm.handlerId" required>
            <option :value="null">请选择处理人</option>
            <option v-for="emp in employeeList" :key="emp.id" :value="emp.id">
              {{ emp.name }}
            </option>
          </select>
        </div>
        
        <div class="form-actions">
          <button 
            class="btn btn-primary" 
            @click="saveNewRecord" 
            :disabled="saving || !addForm.roomId || !addForm.problemDesc || !addForm.handlerId"
          >
            {{ saving ? '保存中...' : '保存' }}
          </button>
          <button class="btn btn-secondary" @click="closeModal">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 编辑维修记录弹窗 -->
    <div v-if="showEditModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal-container">
        <h3>编辑维修记录</h3>
        
        <div class="record-info">
          <p><strong>会议室:</strong> {{ editingRecord.roomname }}</p>
          <p><strong>问题描述:</strong> {{ editingRecord.problemDesc }}</p>
          <p><strong>报修时间:</strong> {{ formatDate(editingRecord.createTime) }}</p>
        </div>
        
        <div class="form-group">
          <label>维修状态:</label>
          <select 
            v-model="editForm.status" 
            :disabled="Number(editingRecord.status) === 3"
          >
            <option value="1">待处理</option>
            <option value="2">处理中</option>
            <option value="3">已完成</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>处理人:</label>
          <select v-model="editForm.handlerId" required>
            <option :value="null">请选择处理人</option>
            <option v-for="emp in employeeList" :key="emp.id" :value="emp.id">
              {{ emp.name }}
            </option>
          </select>
        </div>
        
        <div class="form-actions">
          <button 
            class="btn btn-primary" 
            @click="updateExistingRecord" 
            :disabled="saving"
          >
            {{ saving ? '保存中...' : '保存' }}
          </button>
          <button class="btn btn-secondary" @click="closeModal">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { 
  getRecordsByPage, 
  getRecordsByCondition, 
  createRecord, 
  updateRecord, 
  getAllRecords
} from '../../apis/maintenance';
import { getRoomById, getAllRooms } from '../../apis/room';
import { useUserStore } from '../../stores/user';
import { getAllUsers } from '../../apis/user';

// 获取用户状态
const userStore = useUserStore();

// 状态变量
const records = ref([]);
const loading = ref(true);
const error = ref(null);
const currentPage = ref(1);
const pageSize = ref(10);
const totalPages = ref(1);
const totalRecords = ref(0);

// 搜索和筛选
const searchQuery = ref('');
const roomIdFilter = ref('');
const statusFilter = ref('');

// 会议室列表 - 只包含有维修记录的会议室（用于筛选）
const roomList = ref([]);
// 所有会议室列表（用于新增记录）
const allRoomsList = ref([]);
const roomsLoading = ref(false);
const roomIdNameMap = ref(new Map()); // 会议室ID到名称的映射

// 模态框
const showAddModal = ref(false);
const showEditModal = ref(false);
const saving = ref(false);
const editingRecord = ref({});

// 添加员工列表状态
const employeeList = ref([]);

// 添加员工信息缓存
const employeeMap = ref(new Map()); // 用于存储员工ID和姓名的映射

// 新增表单
const addForm = reactive({
  roomId: '',
  problemDesc: '',
  status: 1,
  handlerId: null // 确保初始值为null
});

// 编辑表单（只包含状态和处理人）
const editForm = reactive({
  maintenanceId: null,
  status: '',
  handlerId: null // 确保初始值为null
});

// 获取所有会议室（用于新增记录）
const fetchAllRooms = async () => {
  try {
    const result = await getAllRooms();
    if (result.code === 200 && result.data) {
      allRoomsList.value = result.data.map(room => ({
        roomId: room.roomId,
        roomname: room.roomname || `会议室${room.roomId}`
      }));
    } else {
      console.error('获取所有会议室失败:', result.msg);
    }
  } catch (err) {
    console.error('获取所有会议室出错:', err);
  }
};

// 从维修记录中获取唯一的会议室列表
const fetchRoomsFromRecords = async () => {
  roomsLoading.value = true;
  try {
    // 获取所有维修记录
    const result = await getAllRecords();
    if (result.code === 200 && result.data) {
      const records = result.data;
      
      // 提取所有唯一的会议室ID
      const uniqueRoomIds = new Set();
      records.forEach(record => {
        if (record.roomId) {
          uniqueRoomIds.add(record.roomId);
        }
      });
      
      // 为每个会议室ID获取名称
      const roomsWithNames = [];
      const fetchPromises = Array.from(uniqueRoomIds).map(async roomId => {
        const roomname = await getRoomName(roomId);
        roomIdNameMap.value.set(roomId, roomname);
        roomsWithNames.push({
          roomId: roomId,
          roomname: roomname
        });
      });
      
      await Promise.all(fetchPromises);
      return roomsWithNames;
    } else {
      console.error('获取维修记录失败:', result.msg);
    }
  } catch (err) {
    console.error('获取维修记录中的会议室出错:', err);
  } finally {
    roomsLoading.value = false;
  }
};

// 根据ID获取会议室名称
const getRoomName = async (roomId) => {
  // 如果缓存中已有该会议室名称，直接返回
  if (roomIdNameMap.value.has(roomId)) {
    return roomIdNameMap.value.get(roomId);
  }
  
  try {
    const result = await getRoomById(roomId);
    if (result.code === 200 && result.data) {
      const roomname = result.data.roomname || `会议室${roomId}`;
      // 缓存会议室名称
      roomIdNameMap.value.set(roomId, roomname);
      return roomname;
    }
    return `会议室${roomId}`;
  } catch (err) {
    console.error(`获取会议室${roomId}信息出错:`, err);
    return `会议室${roomId}`;
  }
};


// 获取维修记录
const fetchRecords = async () => {
  loading.value = true;
  error.value = null;
  
  try {
    let result;
    
    if (hasActiveFilters()) {
      // 使用条件查询
      const condition = {};
      
      if (roomIdFilter.value) {
        condition.roomId = parseInt(roomIdFilter.value);
      }
      
      if (statusFilter.value) {
        condition.status = parseInt(statusFilter.value);
      }
      
      if (searchQuery.value.trim()) {
        condition.problemDesc = searchQuery.value.trim();
      }
      
      result = await getRecordsByCondition({
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        condition
      });
    } else {
      result = await getRecordsByPage(currentPage.value, pageSize.value);
    }
    
    if (result.code === 200) {
      const recordsData = result.data.records || [];
      // 为每条记录添加会议室名称和处理人名称
      const recordsWithNames = await Promise.all(recordsData.map(async record => {
        const roomname = await getRoomName(record.roomId);
        return {
          ...record,
          roomname,
          handlerName: getHandlerNameById(record.handlerId)
        };
      }));
      
      records.value = recordsWithNames;
      totalPages.value = result.data.pages || 1;
      totalRecords.value = result.data.total || 0;
      
      // 更新会议室列表中可能没有的会议室
      updateRoomListFromRecords(recordsData);
    } else {
      error.value = result.msg || '获取维修记录失败';
    }
  } catch (err) {
    console.error('获取维修记录出错:', err);
    error.value = '获取数据时发生错误，请稍后重试';
  } finally {
    loading.value = false;
  }
};

// 从当前记录中更新会议室列表
const updateRoomListFromRecords = (records) => {
  if (!records || records.length === 0) return;
  
  let hasNewRooms = false;
  
  // 检查当前记录中是否有不在roomList中的会议室
  records.forEach(record => {
    if (record.roomId) {
      const existingRoom = roomList.value.find(room => room.roomId === record.roomId);
      if (!existingRoom) {
        hasNewRooms = true;
        const roomname = roomIdNameMap.value.get(record.roomId) || `会议室${record.roomId}`;
        roomList.value.push({
          roomId: record.roomId,
          roomname: roomname
        });
      }
    }
  });
  
  // 如果有新的会议室，重新排序
  if (hasNewRooms) {
    roomList.value.sort((a, b) => a.roomname.localeCompare(b.roomname, 'zh-CN'));
  }
};

// 检查是否有活动的筛选条件
const hasActiveFilters = () => {
  return roomIdFilter.value || statusFilter.value || searchQuery.value;
};

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1; // 重置到第一页
  fetchRecords();
};

// 处理筛选变化
const handleFilterChange = () => {
  currentPage.value = 1; // 重置到第一页
  fetchRecords();
};

// 切换页码
const changePage = (page) => {
  currentPage.value = page;
  fetchRecords();
};

// 打开新增模态框
const openAddModal = () => {
  // 重置表单
  Object.assign(addForm, {
    roomId: '',
    problemDesc: '',
    status: 1,
    handlerId: null // 重置为null
  });
  showAddModal.value = true;
  showEditModal.value = false;
  
  // 获取所有会议室
  if (allRoomsList.value.length === 0) {
    fetchAllRooms();
  }
};

// 打开编辑模态框
const openEditModal = (record) => {
  editingRecord.value = JSON.parse(JSON.stringify(record));
  // 直接用 record.handlerId 赋值，确保 handlerId 是数字类型
  Object.assign(editForm, {
    maintenanceId: record.maintenanceId,
    status: String(record.status),
    handlerId: Number(record.handlerId) || null
  });
  showEditModal.value = true;
  showAddModal.value = false;
};

// 关闭模态框
const closeModal = () => {
  showAddModal.value = false;
  showEditModal.value = false;
};

// 获取所有员工用户
const fetchEmployees = async () => {
  try {
    const result = await getAllUsers();
    if (result.code === 200 && result.data) {
      const filtered = result.data.filter(user => String(user.userType) === '1' && !!user.realName);
      const uniqueMap = new Map();
      filtered.forEach(user => {
        if (!uniqueMap.has(user.userId)) {
          uniqueMap.set(user.userId, {
            id: Number(user.userId),
            name: user.realName
          });
        }
      });
      employeeList.value = Array.from(uniqueMap.values());
      console.log('最终 employeeList:', employeeList.value);
    } else {
      error.value = '获取员工列表失败，请刷新页面重试';
    }
  } catch (err) {
    error.value = '获取员工列表时发生错误，请刷新页面重试';
  }
};

// 保存新记录
const saveNewRecord = async () => {
  if (!addForm.roomId || !addForm.problemDesc || !addForm.handlerId) {
    error.value = '请填写所有必填字段';
    return;
  }
  
  // 确保有登录用户
  if (!userStore.user || !userStore.user.id) {
    error.value = '请先登录后再进行操作';
    console.error('用户未登录或无法获取用户ID');
    return;
  }
  
  saving.value = true;
  
  try {
    // 获取选中的处理人信息
    const selectedHandler = employeeList.value.find(emp => emp.id === addForm.handlerId);
    
    if (!selectedHandler) {
      error.value = '请选择处理人';
      saving.value = false;
      return;
    }
    
    // 转换数据类型
    const recordData = {
      roomId: parseInt(addForm.roomId),
      problemDesc: addForm.problemDesc,
      status: 1,
      handlerId: parseInt(selectedHandler.id), // 确保转换为数字
      handlerName: selectedHandler.name,
      userId: userStore.user.id,
      createTime: new Date().toISOString(),
      startTime: null,
      endTime: null
    };
    
    console.log('当前登录用户信息:', userStore.user);
    console.log('提交的维修记录数据:', recordData);
    
    const result = await createRecord(recordData);
    
    if (result.code === 200) {
      closeModal();
      fetchRecords();
    } else {
      error.value = result.msg || '保存失败';
      console.error('保存失败，服务器返回:', result);
    }
  } catch (err) {
    console.error('保存维修记录出错:', err);
    error.value = '保存时发生错误，请稍后重试';
  } finally {
    saving.value = false;
  }
};

// 更新现有记录
const updateExistingRecord = async () => {
  if (!editForm.handlerId) {
    error.value = '请选择处理人';
    return;
  }
  
  saving.value = true;
  
  try {
    const currentTime = new Date().toISOString();
    const newStatus = Number(editForm.status);
    const oldStatus = Number(editingRecord.value.status);
    
    // 如果记录已完成，不允许修改状态
    if (oldStatus === 3 && newStatus !== 3) {
      error.value = '已完成的维修记录不能修改状态';
      saving.value = false;
      return;
    }
    
    // 其他情况下不允许状态回退
    if (newStatus < oldStatus) {
      error.value = '状态不能回退';
      saving.value = false;
      return;
    }
    
    // 获取选中的处理人信息
    const selectedHandler = employeeList.value.find(emp => emp.id === Number(editForm.handlerId));
    
    if (!selectedHandler) {
      error.value = '请选择处理人';
      saving.value = false;
      return;
    }
    
    const recordData = {
      maintenanceId: Number(editForm.maintenanceId),
      status: newStatus,
      handlerId: selectedHandler.id,
      handlerName: selectedHandler.name,
      roomId: Number(editingRecord.value.roomId),
      problemDesc: editingRecord.value.problemDesc,
      createTime: editingRecord.value.createTime,
      startTime: editingRecord.value.startTime,
      endTime: editingRecord.value.endTime
    };

    console.log('准备更新的数据:', recordData);
    console.log('选中的处理人:', selectedHandler);

    // 只有在状态变化时才更新时间
    if (newStatus === 2 && oldStatus < 2) {
      recordData.startTime = currentTime;
    }
    
    if (newStatus === 3 && oldStatus < 3) {
      recordData.endTime = currentTime;
    }
    
    const result = await updateRecord(editForm.maintenanceId, recordData);
    
    if (result.code === 200) {
      closeModal();
      await fetchRecords(); // 重新获取记录列表
    } else {
      error.value = result.msg || '保存失败';
      console.error('更新失败:', result);
    }
  } catch (err) {
    console.error('更新维修记录出错:', err);
    error.value = '保存时发生错误，请稍后重试';
  } finally {
    saving.value = false;
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知';
  
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '待处理',
    2: '处理中',
    3: '已完成'
  };
  return statusMap[status] || '未知';
};

// 获取状态类名
const getStatusClass = (status) => {
  const classMap = {
    1: 'status-pending',
    2: 'status-processing',
    3: 'status-completed'
  };
  return `status-badge ${classMap[status] || ''}`;
};

// 重置过滤条件
const resetFilters = () => {
  roomIdFilter.value = '';
  statusFilter.value = '';
  searchQuery.value = '';
  currentPage.value = 1;
  fetchRecords();
};

// 获取handlerName
const getHandlerNameById = (id) => {
  const emp = employeeList.value.find(e => e.id === Number(id));
  return emp ? emp.name : '未分配';
};

// 组件挂载时获取数据
onMounted(async () => {
  try {
    // 先获取员工列表
    await fetchEmployees();
    console.log('员工列表加载完成');
    
    // 然后获取会议室列表
    await fetchRoomsFromRecords();
    console.log('会议室列表加载完成');
    
    // 最后获取维修记录
    await fetchRecords();
    console.log('维修记录加载完成');
  } catch (error) {
    console.error('初始化数据加载失败:', error);
    error.value = '加载数据失败，请刷新页面重试';
  }
});
</script>

<style scoped>
.maintenance-management-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* 筛选区域 */
.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-box {
  flex: 1;
  min-width: 200px;
  display: flex;
  gap: 0.5rem;
}

.search-box input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 38px;
}

.btn-search {
  background-color: #5bc0de;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.btn-search:hover {
  background-color: #46b8da;
}

.filter-box {
  display: flex;
  gap: 0.5rem;
}

.filter-box select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.action-box {
  margin-left: auto;
}

/* 表格样式 */
.records-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
}

.records-table th,
.records-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.records-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
}

.records-table tr:hover {
  background-color: #f8f9fa;
}

.description-cell {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-cell {
  display: flex;
  gap: 0.5rem;
}

/* 状态标签 */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: bold;
}

.status-pending {
  background-color: #ffeeba;
  color: #856404;
}

.status-processing {
  background-color: #b8daff;
  color: #004085;
}

.status-completed {
  background-color: #c3e6cb;
  color: #155724;
}

/* 分页 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

:deep(.el-pagination) {
  padding: 0;
  margin: 0;
}

:deep(.el-pagination .el-pagination__total) {
  margin-right: 16px;
}

:deep(.el-pagination .el-pagination__sizes) {
  margin-right: 16px;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  background: transparent;
}

:deep(.el-pagination .el-pager li) {
  background: transparent;
}

:deep(.el-pagination .el-pager li.active) {
  color: #409EFF;
  font-weight: bold;
}

:deep(.el-pagination .el-pagination__jump) {
  margin-left: 16px;
}

:deep(.el-pagination .el-pagination__jump .el-input__inner) {
  text-align: center;
}

/* 按钮样式 */
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: #337ab7;
  color: white;
}

.btn-primary:hover {
  background-color: #286090;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}

.btn-secondary:hover {
  background-color: #e0e0e0;
}

.btn-edit {
  background-color: #5bc0de;
  color: white;
}

.btn-edit:hover {
  background-color: #46b8da;
}

.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.btn-page {
  background-color: #f0f0f0;
  color: #333;
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 加载和错误状态 */
.loading, .error, .no-data {
  text-align: center;
  padding: 2rem;
  color: #555;
}

.error {
  color: #d9534f;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-container h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* 记录信息显示 */
.record-info {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.record-info p {
  margin: 0.5rem 0;
}

.record-info strong {
  color: #555;
}

.btn-reset {
  background-color: #f0ad4e;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.btn-reset:hover {
  background-color: #eea236;
}

.form-group select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}
</style>
